<script setup lang="ts">
import { ref, onMounted, watch, provide } from "vue"; //导入vue函数
import type { Category, Goods } from "@/model"; //导入自定义数据类型
import { getCategoryList, getGoodsList } from "@/api"; //导入axio接口
import GoodsPanel from "@/components/GoodsPanel.vue"; //引入公用自定义组件
import GoodsDetails from "@/components/GoodsDetails.vue"; //引入公用自定义组件
import { useToken } from "@/stores/token"; //导入token状态文件
import { useRouter } from "vue-router"; //导入路由的useRouter函数

//执行方法获得tokenStore对象
const tokenStore = useToken();

//创建router对象
const router = useRouter();

//当前分类编号
const params = defineProps(["id"]);

//当前分类所有子分类数据对象
const categoryList = ref<Category[]>([]);

//定义商品数据对象
const goodsList = ref<Goods[]>([]);

//是否显示商品详情
const isShowDetails = ref(false);
//定义商品详情数据对象
const goodsDetails = ref();
//通过provide实现跨组件通信
provide("isShowDetails", isShowDetails); //商品详情组件是否显示

//获得当前分类所有子分类
async function getCategory() {
  const res = await getCategoryList();
  categoryList.value = res.data.data.filter(
    (value: Category) => value.pid == params.id
  );
}

//获得所有商品列表
async function getGoods() {
  const res = await getGoodsList();
  goodsList.value = res.data.data.filter(
    (value: Goods) => value.category_id != 38
  );
}

//显示商品详情
function showGoodsDetails(goods: Goods) {
  if (tokenStore.token) {
    goods.discount = 1; //设置商品折扣
    goods.num = 1; //设置商品数量
    goodsDetails.value = goods; //传递商品详情信息
    isShowDetails.value = true; //显示商品详情组件
  } else {
    //跳转到登录页面
    router.push("/login");
  }
}

//页面组件加载完成
onMounted(() => {
  getCategory();
  getGoods();
});

//侦听params参数变化
watch(params, () => {
  getCategory();
});
</script>

<template>
  <!--引入子组件-->
  <GoodsPanel v-for="category in categoryList" :title="category.name">
    <div
      class="goodsItem"
      v-for="goods in goodsList.filter((value:Goods)=>value.category_id==category.id)"
      @click="showGoodsDetails(goods)"
    >
      <div>
        <img :src="goods.picture" />
      </div>
      <div>
        <el-text truncated>{{ goods.name }}</el-text>
      </div>
      <!--注：replace用于过滤HTML代码-->
      <div>
        <el-text truncated>{{
          goods.description.replace(/<\/?[^>]+(>|$)/g, "")
        }}</el-text>
      </div>
      <div>￥{{ goods.price.toFixed(2) }}</div>
    </div>
  </GoodsPanel>

  <!--引入商品详情组件-->
  <GoodsDetails :item="goodsDetails"></GoodsDetails>
</template>

<style scoped>
.goodsItem {
  width: 200px;
  border-radius: 5px;
  transition: all 0.3s ease;
  margin-bottom: 20px;
  margin-right: 40px;
}
.goodsItem:hover {
  box-shadow: 0px 3px 5px 5px lightgray;
  transform: translateY(-5px);
}
.goodsItem > div {
  text-align: center;
}
.goodsItem > div:nth-child(1) {
  text-align: center;
  margin: 20px auto 0px auto;
}
.goodsItem > div:nth-child(2) {
  width: 180px;
  margin: 10px auto 0px auto;
}
.goodsItem > div:nth-child(2) .el-text {
  color: black;
}
.goodsItem > div:nth-child(3) {
  width: 180px;
  margin: 5px auto 0px auto;
}
.goodsItem > div:nth-child(3) .el-text {
  font-size: 13px;
}
.goodsItem > div:nth-child(4) {
  font-size: 20px;
  color: #cf4444;
  margin-bottom: 10px;
}
.goodsItem img {
  width: 150px;
  height: 150px;
}
</style>
